<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
        <title>Vue-WMS</title>
        <script include="vue" exclude="plugin,cesium" src="./static/libs/include-cesium-local.js"></script>
        <style type="text/css">
            #app {
                height: 100vh;
                width: 100vw;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <mapgis-web-scene
                :animation="false"
                :timeline="false"
                @load="handleLoad"
                lib-path="./static/libs/cdn/cesium/Cesium.js"
                plugin-path="./static/libs/cdn/zondyclient/webclient-cesium-plugin.min.js"
            >
                <mapgis-3d-ogc-wms-layer
                        :base-url="baseUrl"
                        :layers="layers"
                        :srs="srs"
                        :layer-style="layerStyle"></mapgis-3d-ogc-wms-layer>
            </mapgis-web-scene>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        baseUrl: 'http://develop.smaryun.com:6163/igs/rest/ogc/doc/北京市/WMSServer',
                        layers: '北京市,绿地_1,绿地_2,绿地_3,绿地_4,水域_3,水域_2,水域_1,大学,学校,动物园,高尔夫,观光胜地,果园,住宅用地,医院,商业用地,建筑物,铁路_1,铁路_2,铁路_3,主干道,主干道,高速公路_1,高速公路_1_9-10,三级道路_链接,三级道路,二级道路_链接,二级道路,一级道路_链接,一级道路,主干道_链接,主干道,主干道,高速公路_链接,高速公路_2,高速公路_2,三级道路_链接,三级道路,二级道路_链接,二级道路,一级道路_链接,一级道路,地铁,主干道_链接,主干道,主干道,高速公路_链接,高速公路_2,高速公路_2,地铁站POI,山顶,果园poi,汽车站点POI,大学poi,学校poi,中小学POI,幼儿园POI,医院POI,口腔医院POI,派出所POI,检察院POI,银行POI,邮局POI,体育馆POI,纪念碑POI,博物馆POI,名胜古迹点,动物园poi,观光胜地poi,主题公园POI,宾馆POI,百货店POI,便利店POI,书店POI,快餐POI,咖啡馆POI,电影院POI,高尔夫poi,村庄点,市镇点,区县点,首都点',
                        srs: 'EPSG:4326',
                        layerStyle: {
                            zIndex: 1
                        }
                    };
                },
                methods: {
                    handleLoad(e) {
                        console.log('地图加初始化完毕！', e);
                        const webGlobe = e.component.webGlobe;
                        var sceneManager = new CesiumZondy.Manager.SceneManager({
                            viewer: webGlobe.viewer
                        });
                        //视点跳转（经度，纬度，视角高度，跳转持续时间）
                        sceneManager.flyTo(116.348, 40.236, 300000, 2);
                    }
                }
            });
        </script>
    </body>
</html>
